<template>
  <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
    <NSpace vertical :size="14">
      <NGrid :x-gap="14" :y-gap="14" responsive="screen" item-responsive>
        <NGi span="24 s:24 m:4">
          <NCard title="权限分类" :bordered="false" class="sm:flex-1-hidden card-wrapper ">
            <NScrollbar class="pr-20px">
              <NList hoverable clickable>
                <NListItem>
                  <NThing title="菜单权限" content-style="margin-top: 10px;" @click="handleMenuClick"/>
                </NListItem>
                <NListItem>
                  <NThing title="按钮权限" content-style="margin-top: 10px;" @click="handleButtonClick"/>
                </NListItem>
              </NList>
            </NScrollbar>
          </NCard>
        </NGi>

        <NGi span="24 s:24 m:20" v-if="isMenu">
          <NCard size="small" class="sm:flex-1-hidden card-wrapper ">
            <NScrollbar class="pr-20px">
            <NGrid :x-gap="14" :y-gap="14" responsive="screen" item-responsive>
              <NGi span="24 s:12 m:12">
                <NCard  title="菜单权限"  size="small">
                  <NScrollbar class="h-500px pr-20px">
                    <NTree v-model:checked-keys="menuChecks" block-line default-expand-all show-line checkable cascade :data="menuData" label-field="title" key-field="id" children-field="children"/>
                  </NScrollbar>
                  <template #header-extra>
                    <NSpace justify="end" :size="16">
                      <NButton type="primary" @click="handleMenuSubmit">保存</NButton>
                    </NSpace>
                  </template>
                </NCard>
              </NGi>
              <NGi span="24 s:12 m:12">
                <NCard  title="已选菜单"  size="small" class="sm:flex-1-hidden card-wrapper ">
                  <NScrollbar class="h-500px pr-20px">
                    <NTree block-line default-expand-all show-line :data="menuChecksData" label-field="title" key-field="id" children-field="children"/>
                  </NScrollbar>
                  <template #header-extra>
                    <NSpace justify="end" :size="16">
                      <NButton type="primary" @click="handleRefreshMenu">刷新</NButton>
                    </NSpace>
                  </template>
                </NCard>
              </NGi>
            </NGrid>
            </NScrollbar>
          </NCard>
        </NGi>

        <NGi span="24 s:24 m:20" v-if="!isMenu">
          <NCard size="small" class="sm:flex-1-hidden card-wrapper ">
            <NScrollbar class="pr-20px">
            <NGrid :x-gap="14" :y-gap="14" responsive="screen" item-responsive>
              <NGi span="24 s:12 m:4">
                <NCard title="菜单列表" size="small" class="sm:flex-1-hidden card-wrapper ">
                  <NScrollbar class="h-600px pr-20px">
                    <NTree block-line :data="menuDatalist" label-field="title" key-field="id" @update-selected-keys="updateMenuKeys"/>
                  </NScrollbar>
                  <template #header-extra>
                    <NSpace justify="end" :size="16">
                      <NButton type="primary">刷新</NButton>
                    </NSpace>
                  </template>
                </NCard>
              </NGi>
              <NGi span="24 s:12 m:8">
                <NCard title="按钮权限" size="small" class="sm:flex-1-hidden card-wrapper ">
                  <NScrollbar class="h-600px pr-20px">
                    <NTree v-model:checked-keys="buttonChecks" block-line default-expand-all show-line checkable cascade :data="buttonData" label-field="title" key-field="id"
                           children-field="children"/>
                  </NScrollbar>
                  <template #header-extra>
                    <NSpace justify="end" :size="16">
                      <NButton type="primary" @click="handleButtonSubmit">保存</NButton>
                    </NSpace>
                  </template>
                </NCard>
              </NGi>
              <NGi span="24 s:12 m:12">
                <NCard  title="已选按钮"  size="small" class="sm:flex-1-hidden card-wrapper ">
                  <NScrollbar class="h-600px pr-20px">
                    <NTree block-line default-expand-all show-line :data="buttonChecksData" label-field="title" key-field="id" children-field="children"/>
                  </NScrollbar>
                  <template #header-extra>
                    <NSpace justify="end" :size="16">
                      <NButton type="primary" @click="handleRefreshButton">刷新</NButton>
                    </NSpace>
                  </template>
                </NCard>
              </NGi>
            </NGrid>
            </NScrollbar>
          </NCard>
        </NGi>
      </NGrid>
    </NSpace>
  </div>
</template>

<script setup lang="tsx">
import {ref, onMounted, reactive, toRefs,computed } from 'vue'
import { useMessage  } from 'naive-ui';
import { useRoute } from 'vue-router';
const route = useRoute();

const routeQuery = computed(() => JSON.stringify(route.query));
console.log("routeQuery:",routeQuery.value)
interface Resources{
  id:number,
  title:string,
  children:Resources[]
}
const menuData = ref([
  {
    id:1,
    title:"组织成员",
    children: [{id:10,title:"组织架构"}, {id:11,title:"成员管理"}, {id:12,title:"职位管理"}]
  },
  {
    id:2,
    title:"系统管理",
    children: [{id:21,title:"角色管理"}, {id:22,title:"资源管理"}, {id:23,title:"用户管理"}]
  }
] as Resources[] )
const buttonData = ref([
  {
    id:10,
    title:"组织架构",
    children: [{id:100,title:"新增"},{id:101,title:"修改"},{id:102,title:"删除"}]
  },
  {
    id:11,
    title:"成员管理",
    children: [{id:103,title:"新增"},{id:104,title:"修改"},{id:105,title:"删除"},{id:107,title:"导入"}]
  },
  {
    id:12,
    title:"职位管理",
    children: [{id:108,title:"新增"},{id:109,title:"修改"},{id:110,title:"删除"},]
  },
  {
    id:21,
    title:"角色管理",
    children: [{id:111,title:"新增"},{id:112,title:"修改"},{id:113,title:"删除"},{id:119,title:"授权资源"},{id:120,title:"数据权限"}]
  },
  {
    id:22,
    title:"资源管理",
    children: [{id:1114,title:"新增"},{id:115,title:"修改"},{id:1116,title:"删除"}]
  },
  {
    id:23,
    title:"用户管理",
    children: [{id:117,title:"分配角色"},{id:118,title:"启用"},{id:121,title:"冻结"}]
  }
]as Resources[])

const menuDatalist = ref([
  {id:10, title:"组织架构"},
  {id:11, title:"成员管理"},
  {id:12, title:"职位管理"},
  {id:21, title:"角色管理"},
  {id:22, title:"资源管理"},
  {id:23, title:"用户管理"}
])


const message = useMessage()
const state = reactive({
  isMenu:true,
  menuChecks:[] as number[],
  menuChecksData:[]as Resources[],
  buttonChecks:[] as number[],
  buttonChecksData:[] as Resources[]
})
const {isMenu,menuChecks,buttonChecks,menuChecksData,buttonChecksData} = {...toRefs(state)}
// 初始化加载
onMounted(() => {

})

function handleMenuClick(){
  message.info('菜单权限')
  state.isMenu = true;
}
function handleButtonClick(){
  message.info('按钮权限')
  state.isMenu = false
}
// 菜单列表节点选中项发生变化时的回调函数
const updateMenuKeys = (keys: Array<string | number>) => {
  console.log("菜单列表节点选中:",keys)
  message.info(`菜单列表选中节点:${keys}`)
}
// 过滤选中的菜单数据
const filteredData = computed(() => {
  const result: Resources[] = [];
  for (const item of menuData.value) {
    const filteredChildren: Resources[] = [];
    for (const child of item.children) {
      if (menuChecks.value.includes(child.id)) {
        filteredChildren.push(child);
      }
    }
    if (filteredChildren.length > 0 || menuChecks.value.includes(item.id)) {
      const newItem: Resources = {
        id: item.id,
        title: item.title,
        children: filteredChildren
      };
      result.push(newItem);
    }
  }
  return result;
});
// 获取选中的数据
function handleMenuSubmit(){
  state.menuChecksData=[]
  filteredData.value.forEach(item => state.menuChecksData.push(item));
  message.success(`保存成功${routeQuery.value}`)
}
// 刷新
function handleRefreshMenu(){
  state.menuChecksData = []
  filteredData.value.forEach(item => state.menuChecksData.push(item));
}

// 过滤选中的按钮数据
const filteredButtonData = computed(() => {
  const result: Resources[] = [];
  for (const item of buttonData.value) {
    const filteredChildren: Resources[] = [];
    for (const child of item.children) {
      if (buttonChecks.value.includes(child.id)) {
        filteredChildren.push(child);
      }
    }
    if (filteredChildren.length > 0 || buttonChecks.value.includes(item.id)) {
      const newItem: Resources = {
        id: item.id,
        title: item.title,
        children: filteredChildren
      };
      result.push(newItem);
    }
  }
  return result;
});
// 获取选中的数据
function handleButtonSubmit(){
  state.buttonChecksData = []
  filteredButtonData.value.forEach(item => state.buttonChecksData.push(item));
  message.success(`保存成功${routeQuery.value}`)
}
// 刷新
function handleRefreshButton(){
  state.buttonChecksData = []
  filteredButtonData.value.forEach(item => state.buttonChecksData.push(item));
}
</script>

<style scoped>

</style>
